import React, { useCallback, useEffect, useState } from 'react';
import DataGrid, { Column, Paging } from 'devextreme-react/data-grid';

import { intl } from '@/utils';
import { getMembersList } from '../service';

const ZcbfMember = (props: any) => {
  const { tableRow } = props;
  const [appearanceData, setAppearanceData] = useState<any>([]);

  // 数据传递
  const formReload = async () => {

    const res = await getMembersList({
      projectBh: tableRow.projectBh,
      XMType: tableRow.XMType === '单机审计项目' ? tableRow.XMType : ''
    });
    if (res.success) {
      setAppearanceData(res.data);
    }
  };
  useEffect(() => {
    if (tableRow.projectBh) {
      formReload();
    } else {
      setAppearanceData([]);
    }
  }, [ tableRow]);

  return (
    <div style={{ height: '100%', width: '100%' }} >
      <DataGrid
        className='PaperDevSortableGrid'
        height='100%'
        dataSource={appearanceData}
        keyExpr="guid"
        allowColumnReordering={true}
        showColumnLines={true}
        showRowLines={true}
        showBorders={true}
        allowColumnResizing={true}
        columnResizingMode="widget"
        hoverStateEnabled={true}
        scrolling={{ rowRenderingMode: 'virtual' }}
        selection={{ mode: 'single' }}
        // groupPanel={{ visible: false }}
        // grouping={{ autoExpandAll: true }}
        paging={{
          enabled: false
        }}
      
      >
        {/* <Paging defaultPageSize={10} /> */}
        <Column
          caption={intl('pro.DataGrid.ProjectType', '项目名称')}
          dataField='sjxmmc'
          width={120}
          sortOrder={'desc'}
          groupIndex={0}
        />
        <Column
          caption={intl('pro.DataGrid.ProjectName', '姓名')}
          dataField='UserName'
          width={220}
        />
        <Column
          caption={intl('pro.DataGrid.ProjectPartner', '编号')}
          dataField='UserCode'
        />
        <Column
          width={120}
          fixed={true}
          fixedPosition='right'
          caption={intl('pro.DataGrid.ProjectManager', '角色')}
          dataField='membersRole'
        />
      </DataGrid>
    </div>
  );
};

export default ZcbfMember;
